<template>
  <div class="backgroundColor container forget fixed">
    <Header :content="content"></Header>
    <div class="forgetInput">
      <group>
        <x-input placeholder="验证码" name="mobile" keyboard="number" v-model="code"  class="font14">
          <span slot="right" :class="{defaultColor:!codeDisabled,disabledColor:codeDisabled}" @click="openDialog">{{codeContent}}</span>
        </x-input>
      </group>
      <group>
        <x-input name="mobile" placeholder="修改登录密码，6-32位数字、字母或符号" keyboard="number" v-model="pwd" class="font14" :type="passwordType"></x-input>
      </group>
      <group>
        <x-input name="mobile" placeholder="再次输入登录密码" keyboard="number" v-model="repwd" class="font14" :type="passwordType"></x-input>
      </group>
      <div style="margin-top:30px;" class="login">
        <x-button type="primary" @click.native="submitPwd" :disabled="submitDisabled" style="height: 50px;line-height: 50px;">确认</x-button>
      </div>
    </div>
    <Captcha
      :showToast="showToast"
      @close="close"
      @setInter="setInter"
    ></Captcha>
  </div>
</template>
<style>
</style>
<script>
  import Header from '../common/header.vue'
  import Captcha from '../common/captcha.vue'
  import { XInput,Group } from 'vux'
  export default{
    data(){
      return {
        code:'',
        pwd:'',
        repwd:'',
        smsId:'',
        content:'修改登录密码',
        passwordType:'password',
        submitDisabled:false,

        codeContent:'发送验证码',
        showToast:false,
        userInfo:'',
        smsId:'',
        codeDisabled:false
      }
    },
    methods:{
      close(){
        this.showToast = false;
      },
      setInter(smsCode){
        this.smsId = smsCode;
        var count = 60;
        this.codeContent = count + 's';
        this.codeDisabled = true;
        this.timer = setInterval(()=>{
          count--;
          this.codeContent = count + 's';
          if(count<=0){
            clearInterval(this.timer);
            this.codeDisabled = false;
            this.codeContent = '发送验证码';
          }
        },1000)
      },
      openDialog(){
        if(this.codeDisabled){
          return;
        }
        this.service('smscode',{
          phone:localStorage.getItem('token')
        },'post').then(res=>{
          if(res.code== 200){
            this.toastFn(res.msg,'','success');
            this.setInter()
            return
          }
          this.toastFn(res.msg);
        })
      },
      regFn(){
        if(!this.pwd){
          this.toastFn('请填写登录密码');
          return false;
        }else{
          if(!this.regex().pwd.test(this.pwd)){
            this.toastFn('请输入6-32位的登录密码');
            return false;
          }
        }
        if(!this.repwd){
          this.toastFn('请填写确认登录密码');
          return false;
        }
        if(this.repwd !== this.pwd){
          this.toastFn('两次密码输入不一致');
          return false;
        }
        if(!this.code){
          this.toastFn('请填写验证码');
          return false;
        }
        return true;
      },
      init(){
        this.pwd = '';
        this.repwd = '';
        this.code = '';
      },
      submitPwd(){
        if(!this.regFn()){
          return;
        }
        this.submitDisabled = true;
        this.service('resetpwd',{
          password:this.pwd,
          cpassword:this.repwd,
          smscode:this.code
//          smsId:this.smsId
        },'post').then((res)=>{
          this.submitDisabled = false;
          if(res.code ==200){
            this.toastFn(res.msg||'修改成功','','success');
            this.init();
            this.$router.push('/myself');
            return
          }
          this.toastFn(res.msg);
        })
      }
    },
    created(){
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    },
    components:{
      Header,
      XInput,
      Group,
      Captcha
    }
  }
</script>
<style>
  .forgetInput{
    margin: 30px 25px 0;
  }
  .forget .weui-cell{
    background: #424252;
    border-radius: 2px;
    margin-bottom: 15px;
  }
  .forget .weui-cells:before,.forget .weui-cells:after{
    border:none;
  }
</style>
